<template>
    <div class="playing">
    <transition-group class="trans" tag='ul' name="slideUp" >
      <li class="movies clearfix"
        v-for="movies in  movieList" 
        :key="movies.id" 
        @click="toMovie(movies.id)"  >
        <div class="coverBox">
            <img :src="picFix(movies.img)" alt="">
        </div>
        <div class="movieContent">
          <h2  class="textover1">{{ movies.nm }}</h2>
          <div class="textover1" v-if="movies.globalReleased && movies.sc != 0">观众评<span class="grade">{{movies.sc}}</span></div>
          <div class="textover1" v-if="movies.globalReleased==false">
            <span class="person">{{movies.wish}}</span>人想看
          </div>
          <div class="textover1" v-if="movies.globalReleased && movies.sc==0">
            暂无评分
          </div>

          <div class="textover1">主演：{{movies.star}}</div>
          <div class="showInfo textover1">{{movies.showInfo}}</div>
        </div>
        <div class="buy">
            <button v-if="movies.globalReleased" >购票</button>
            <button v-else class="pre">预售</button>
          
        </div>
      </li>
    </transition-group>
    </div>
</template>

<script>

import '../scss/playing.scss';

/* import { Loadmore } from 'mint-ui';

Vue.component(Loadmore.name, Loadmore); */

export default {
      created() {
    // http://m.maoyan.com == /maoyan
    this.$store.commit('changeHT','布鲁吉吉电影院');
    // 请求 --> 本地服务器（webpack的devServer）--> 猫眼的服务器
    this.axios.get("/ajax/movieOnInfoList").then(res => {
      console.log("正在热映：", res);
      this.movieList = res.data.movieList;
    });

    /* this.$store.state.hederTitle  */
  },
  data(){
    return {
      movieList:[]
    }
  },
  methods: {
    // 修改图片尺寸
    picFix(url){
      return url.replace('w.h','128.180');
    },
    // 跳转电影页
    toMovie(id){
      /* 当我点击的时候把该电影的信息的id传到movie组件上 */
      this.$router.push({name:"movie",params:{ movieId : id } })
    },
    handleTopChange(status) {
        this.topStatus = status;
      },
    }
}
</script>
